<template>
  <div class="container">
    <iframe :src="url" class="frame" />
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from "vue";
import {
  RouteLocationNormalizedLoaded,
  Router,
  useRoute,
  useRouter,
} from "vue-router";
import { Store, useStore } from "vuex";
import { useDetailInfo } from "../compositions";
import { INewsInfo } from "../typings";

export default defineComponent({
  name: "Detail",
  setup() {
    const store: Store<any> = useStore();
    const route: RouteLocationNormalizedLoaded = useRoute();
    const router: Router = useRouter();

    //获取详情页数据
    const detailInfo: INewsInfo | undefined = useDetailInfo(store, route);

    // console.log(detailInfo.url);
    //url: "https://mini.eastday.com/mobile/220330142657157715158.html"

    //没有拿到值时
    if (!detailInfo) {
      router.push("/");
      return;
    }

    return {
      //展开所有属性
      ...toRefs(detailInfo),
    };
  },
});
</script>


<style lang="scss" scoped>
.container {
  height: 100%;

  .frame {
    overflow: hidden;
    width: 100%;
    height: 800px;
    margin-top: 0.44rem;
    border: 0;
    overflow-y: auto;
  }
}
</style>
